<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <div>
    <ym v-for="item in items" v-bind:qin="item"></ym>
  </div>
  <div>
    <ol>
      <!--
          现在我们为每个 todo-item 提供 todo 对象 todo 对象是变量，即其内容可以是动态的。
          我们也需要为每个组件提供一个“key”，稍后再作详细解释。
      -->
      <todo-item v-for="item in groceryList"  v-bind:todo="item" v-bind:key="item.id"></todo-item>
    </ol>
  </div>
</div>

<script type="text/javascript" src="../../lib/vue/2.6.14/vue.js"></script>
<script type="text/javascript">
  // 定义名为 ym 的组件
  Vue.component('ym',{
    // 传递参数
    props:['qin'],
    // 模板
    template: '<li>{{qin}}</li>'
  })
  Vue.component('todo-item', {
    // todo-item 组件现在接受一个
    // "prop"，类似于一个自定义 attribute。
    // 这个 prop 名为 todo。
    props: ['todo'],
    template: '<li>{{ todo.text }}</li>'
  })
  var app = new Vue({
    el: "#app",
    data: {
      items: ['张三','李四','王五'],
      groceryList: [
        { id: 0, text: '蔬菜' },
        { id: 1, text: '奶酪' },
        { id: 2, text: '随便其它什么人吃的东西' }
      ]
    },
  })

</script>
</body>
</html>